<template>
  <div>
    <slotWrap>
      <template v-slot:itemBox>
        <itemWrap span="4" label="受益片区">
          <a-select
            v-model="search.mainArea"
            style="width: 100%;"
            :options="districtLists"
            :disabled="isShowSelect"
          >
          </a-select>
        </itemWrap>
        <itemWrap span="4" label="服务片区">
          <a-select
            v-model="search.relatedArea"
            style="width: 100%;"
            :options="districtLists"
          >
          </a-select>
        </itemWrap>
        <itemWrap span="4" label="收支类型">
          <a-select
            v-model="search.searchType"
            style="width: 100%;"
            :options="typeLists"
          >
          </a-select>
        </itemWrap>
        <itemWrap span="4" label="时间选择">
          <a-select
            v-model="search.timeType"
            style="width: 100%;"
            :options="timeTypeLists"
            @change="onTimeTypeChange"
          >
          </a-select>
        </itemWrap>
        <itemWrap span="4" label="" v-show="isShowRangeTime">
          <a-range-picker v-model="search.rangeTime" @change="onTimeChange" />
        </itemWrap>
      </template>
      <template v-slot:btnBox>
        <a-button
          type="primary"
          style="margin-right: 8px;"
          @click="searchData()"
        >
          搜索
        </a-button>
        <!-- <a-button type="primary" @click="restSearchData()">
          重置
        </a-button> -->
      </template>
    </slotWrap>
  </div>
</template>

<script>
import moment from "moment";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import api from "@/server/userConfig";
import { getRoleId } from "@/unit/tool";
import { RepairType } from "@/unit/constantValue";
import { slotWrap, itemWrap } from "../../../components/slotSearch/index.js";

const timeTypeLists = [
  {
    label: "本季度",
    value: 0
  },
  {
    label: "上一季度",
    value: 1
  },
  {
    label: "本年度",
    value: 2
  },
  {
    label: "上一年度",
    value: 3
  },
  {
    label: "自定义",
    value: 4
  }
];

const typeLists = [
  {
    label: "全部",
    value: 0
  },
  {
    label: "支出",
    value: 1
  },
  {
    label: "收入",
    value: 2
  }
];

function getRangeTime(value) {
  switch (value) {
    case 0:
      return [
        moment()
          .quarter(moment().quarter())
          .startOf("quarter"),
        moment()
          .quarter(moment().quarter())
          .endOf("quarter")
      ];
    case 1:
      return [
        moment()
          .quarter(moment().quarter() - 1)
          .startOf("quarter"),
        moment()
          .quarter(moment().quarter() - 1)
          .endOf("quarter")
      ];
    case 2:
      return [
        moment()
          .year(moment().year())
          .startOf("year"),
        moment()
          .year(moment().year())
          .endOf("year")
      ];
    case 3:
      return [
        moment()
          .year(moment().year() - 1)
          .startOf("year"),
        moment()
          .year(moment().year() - 1)
          .endOf("year")
      ];
    case 4:
      return [moment(), moment()];
    default:
      break;
  }
}

export default {
  name: "ServiceStatistics",
  components: {
    slotWrap,
    itemWrap
  },
  props: {
    initData: Object
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      secondDepartment: "",
      expand: false,
      rangeTime: [],
      districtLists: [],
      timeTypeLists,
      typeLists,
      search: {
        rangeTime: [],
        mainArea: "",
        relatedArea: "",
        timeType: "",
        searchType: ""
      }
    };
  },
  watch: {
    initData: {
      immediate: true,
      handler: function(newVal, oldVal) {
        this.search = Object.assign(this.search, newVal);
        let { timeType, startTime, endTime } = newVal;
        if (timeType != 4) {
          this.search.rangeTime = getRangeTime(timeType);
        } else {
          this.search.rangeTime = [moment(startTime), moment(endTime)];
        }
      }
    }
  },
  computed: {
    isShowRangeTime: function() {
      return this.search.timeType == 4 ? true : false;
    },
    isShowSelect: function() {
      let isOK = "";
      if (this.role == 17) {
        isOK = false;
      } else if (this.role == 18) {
        isOK = true;
      }
      return isOK;
    }
  },
  methods: {
    // onTimeChange(e) {
    // let [startTime, endTime] = e;
    // if (e.length > 0) {
    //   this.search.startTime = `${this.$Moment(startTime).format(
    //     "YYYY-MM-DD"
    //   )} 00:00:00`;
    //   this.search.endTime = `${this.$Moment(endTime).format(
    //     "YYYY-MM-DD"
    //   )} 23:59:59`;
    // } else {
    //   this.search.startTime = "";
    //   this.search.endTime = "";
    // }
    // },

    onTimeChange(e) {
      this.search.rangeTime = e;
      let [startTime, endTime] = this.search.rangeTime;
      this.search.startTime = moment(startTime).format("YYYY-MM-DD");
      this.search.endTime = moment(endTime).format("YYYY-MM-DD");
    },

    onTimeTypeChange(e) {
      this.search.rangeTime = getRangeTime(parseInt(e));
      let [startTime, endTime] = this.search.rangeTime;
      this.search.startTime = moment(startTime).format("YYYY-MM-DD");
      this.search.endTime = moment(endTime).format("YYYY-MM-DD");
    },

    expandForm() {
      this.expand = !this.expand;
    },

    searchData() {
      let _this = this;
      let { rangeTime, ...rest } = this.search;

      this.$emit("emitSearchData", {
        ...rest
      });
    },

    // restSearchData() {
    //   this.rangeTime = [];
    //   this.search = Object.assign({}, this.defaultSearchData);
    // },

    async findSecondDepartment(parames, key) {
      const res = await api.findSecondDepartment({
        primaryDepartment: parames.department
      });
      console.log(res);

      if (res.success == false) {
        return;
      }

      let optionLists = buildSelectOption(res.data);
      this[key] = optionLists;

      function buildSelectOption(lists) {
        let _lists = [];
        // lists.unshift({ department: "全部" });
        _lists = lists.map((item, index) => {
          return {
            label: item.department,
            value: item.department
          };
        });
        return _lists;
      }
    }
  },
  created() {},
  mounted() {
    getRoleId(this);
    this.findSecondDepartment({ department: "客户服务部" }, "districtLists");
  }
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 16px 16px 16px 16px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  min-width: 76px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #646464;
  text-align: right;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  width: 100%;
  padding: 0px 1px;
}
</style>
